<template>
    <div id="hotel">
        <el-backtop
            ref="back_btn"
            :visibility-height="500"
        />
        <div class="breadcrumb">
            <div class="breadcrumb_hotel">
                酒店
            </div>
            <i class="el-breadcrumb__separator el-icon-arrow-right" />
            <div class="breadcrumb_city">
                {{ cityData.cityName | city_name_filter }}酒店预订
            </div>
        </div>
        <div class="hotel_select_filter">
            <HotelSelectFilter
                @change_select_filter="change_select_filter"
            />
        </div>
        <div class="hotel_map">
            <div class="scenics_module"
                v-if="hotel_scenics_list.length"
            >
                <HotelScenicsModule 
                    :hotel-scenics-list="hotel_scenics_list"
                />
            </div>
            <!-- <HotelMapModule /> -->
            <div class="map_module">
                <HotelPublicMap
                    :hotel-detail-list="hotel_detail_list"
                    :is-around="false"
                />
            </div>
        </div>
        <div class="hotel_detail_filter">
            <HotelDetailFilter
                @change_detail_filter="change_detail_filter"
                @change_price_filter="change_price_filter"
            />
        </div>
        <div class="hotel_detail_list">
            <div v-if="loading_completed">
                <HotelDetailListItem
                    v-for="(item, index) in hotel_detail_list"
                    :key="index"
                    :data="item"
                />
            </div>
            <div v-else class="loading">
                <img :src="require('@/static/loading.gif')" alt="" style="width: 450px; height: 260px;">
            </div>
        </div>
        <div class="hotel_pagination">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="hotel_detail_list_total"
                :page-size="hotelPage.pageSize"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    export default {
        filters: {
            city_name_filter (val) {
                if (val) {
                    return val.split("市")[0];
                }
            }
        },
        data () {
            return {
                loading_completed: false,
                map_key: "34723cdff8d29820decbe8b8284ecfbb",
                // 城市信息
                cityData: {
                    cityName: "",
                    cityMessage: {}
                },
                hotelSelectFilter: {

                },
                hotelDetailFilter: {

                },
                hotelPrice: {
                    price_lt: 4000
                },
                hotelPage: {
                    pageIndex: 0,
                    pageSize: 10
                },
                hotel_detail_list: [],
                hotel_detail_list_total: 0,
                hotel_scenics_list: []
            };
        },
        computed: {
            get_req_page_data () {
                return {
                    _limit: this.hotelPage.pageSize,
                    _start: this.hotelPage.pageIndex * this.hotelPage.pageSize
                };
            }
        },
        created () {
            this.cityData.cityName = this.$route.query.cityName;
            if (!this.cityData.cityName) {
                // 获取ip位置
                this.get_ip_position();
            } else {
                this.get_city_message();
            }
        },
        methods: {
            async get_ip_position () {
                const res = await this.$axios({
                    method: "GET",
                    url: "https://restapi.amap.com/v3/ip?parameters",
                    params: {
                        key: this.map_key
                    }
                });
                this.cityData.cityName = res.data.city;
                // 提示城市 调试时未开启
                this.$confirm(`检测到您当前城市为: ${this.cityData.cityName}`, "提示", {
                    confirmButtonText: "确定",
                    showCancelButton: false,
                    type: "success"
                });
                this.$router.push({
                    query: {
                        cityName: res.data.city.split("市")[0]
                    }
                });
                this.get_city_message();
            },
            async get_city_message () {
                const res = await this.$axios({
                    method: "GET",
                    url: "http://157.122.54.189:9095/cities",
                    params: {
                        name: this.cityData.cityName
                    }
                });
                this.cityData.cityMessage = res.data.data[0];
                this.hotel_scenics_list = this.cityData.cityMessage.scenics;
                if (!this.cityData.cityMessage) {
                    this.$confirm("十分抱歉,我们还不知道这所城市", "提示", {
                        confirmButtonText: "确定",
                        showCancelButton: false,
                        type: "error"
                    });
                    return false;
                }
                this.get_hotel_detail();
            },
            async get_hotel_detail () {
                const page = this.get_req_page_data;
                this.loading_completed = false;
                const str = this.cit_filter_filter(this.hotelDetailFilter);
                const reqData = {
                    city: this.cityData.cityMessage.id,
                    ...page,
                    ...this.hotelPrice,
                    ...this.hotelSelectFilter
                };
                const res = await this.$axios({
                    method: "GET",
                    url: "http://157.122.54.189:9095/hotels" + str,
                    params: reqData
                });
                this.hotel_detail_list = res.data.data;
                this.hotel_detail_list_total = res.data.total;
                this.loading_completed = true;
            },
            handleCurrentChange (pageIndex) {
                this.$refs.back_btn.$el.click();
                this.hotelPage.pageIndex = pageIndex - 1;
                this.get_hotel_detail();
            },
            change_detail_filter (object) {
                this.hotelDetailFilter = object;
                this.get_hotel_detail();
            },
            cit_filter_filter (object) {
                this.hotelPage.pageIndex = 0;
                let str = "";
                for (const key in object) {
                    if (object[key]) {
                        const element = object[key];
                        element.forEach((elementElement) => {
                            str += String(key) + "_in=" + String(elementElement) + "&";
                        });
                    }
                }
                if (str.length) {
                    str = str.substring(0, str.length - 1);
                    str = "?" + str;
                }
                return str;
            },
            change_price_filter (str) {
                this.hotelPage.pageIndex = 0;
                this.hotelPrice = str;
                this.get_hotel_detail();
            },
            change_select_filter (object) {
                if (object.date.length) {
                    this.hotelSelectFilter.enterTime = object.date[0];
                    this.hotelSelectFilter.leftTime = object.date[1];
                }
                if (object.adults_number || object.children_number) {
                    const number = object.adults_number + object.children_number;
                    if (number) {
                        // 疑似服务器bug,带人数传报错
                        // this.hotelSelectFilter.person = number;
                    }
                }
                if (object.city && object.city !== this.cityData.cityName) {
                    this.cityData.cityName = object.city;
                    this.get_city_message();
                } else {
                    this.get_hotel_detail();
                }
            }
        }
    };
</script>

<style lang="less" scoped>
#hotel {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 20px;
    .breadcrumb {
        height: 56px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;
        line-height: 1;
    }
    .hotel_map {
        width: 100%;
        height: 260px;
        margin-bottom: 20px;
        .scenics_module {
            float: left;
            width: 550px;
            height: 100%;
        }
        .map_module {
            float: right;
            height: 100%;
            width: 450px;
        }
    }
    .hotel_detail_filter {
        width: 100%;
    }
    .hotel_detail_list {
        margin-bottom: 40px;
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .hotel_pagination {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
}
</style>
